<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'
import moment from "moment"

// 查询
const pageSize = ref(10);
const pageNo = ref(1)
const headers = [
    {title: 'ID', key: 'id', sortable: false},
    {title: '计划日期', key: 'dateTime', sortable: false},
    {title: '巡更计划', key: 'plan.name', sortable: false},
    {title: '状态', key: 'status', sortable: false},
    {title: '巡更人', key: 'completedBys', sortable: false},
    {title: '操作', key: 'actions', sortable: false},
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const isShowDialog = ref(false);
const planList = ref([]);
const statusList = ref([
    { label: "待执行", value: "PENDING" },
    { label: "执行中", value: "IN_PROGRESS" },
    { label: "已完成", value: "COMPLETED" }
])

const search = ref('');
const status = ref("");
const patrolPlanId = ref("")
watch(status, () => {
    search.value = status.value
})
watch(patrolPlanId, () => {
    search.value = patrolPlanId.value
})

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    pageNo.value = page;
    pageSize.value = itemsPerPage;
    let url = `http://172.168.180.4:7000/patrol-tasks?page=${page - 1}&size=${itemsPerPage}`
    if(patrolPlanId.value) {
        url += `&patrolPlanId=${patrolPlanId.value}`
    }
    if(status.value) {
        url += `&status=${status.value}`
    }
    axios({
        method: "GET",
        url: url,
        headers: {
            "Authorization": 'Bearer ' + localStorage.getItem("token")
        }
    }).then(res => {}, err => {
        items.value = err.data.content
        totalItems.value = err.data.totalElements
        loading.value = false
    })
}

const selectData = ref({});
function clickEdit(row) {
    isShowDialog.value = true
    selectData.value = row
}

function close() {
    isShowDialog.value = false
}

onMounted(() => {
    loadItems({page: 1, itemsPerPage: pageSize.value});
    axios({
        method: "GET",
        url: `http://172.168.180.4:7000/patrol-plans?page=0&size=1000`,
        headers: {
            "Authorization": 'Bearer ' + localStorage.getItem("token")
        }
    }).then(res => {}, err => {
        planList.value = err.data.content
    })
});
</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>巡更任务</v-toolbar-title>
        <v-select
        v-model="patrolPlanId"
        :clearable="true"
        hide-details
        label="巡更计划"
        :items=planList
        item-title="name"
        item-value="id"
        ></v-select>
        <v-select
        v-model="status"
        :clearable="true"
        hide-details
        label="巡更状态"
        :items=statusList
        item-title="label"
        item-value="value"
        ></v-select>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <v-card>
                <v-card-title>巡更任务详情</v-card-title>
                <v-card-text>
                    <p>计划日期：{{ moment(selectData.dateTime).format("YYYY-MM-DD") }}</p>
                    <p>巡更计划：{{ selectData.plan.name }}</p>
                    <p>
                        状态：
                        <font v-if="selectData.status == 'PENDING'">待执行</font>
                        <font v-if="selectData.status == 'IN_PROGRESS'">执行中</font>
                        <font v-if="selectData.status == 'COMPLETED'">已完成</font>
                    </p>
                    <p>完成时间：{{ selectData.completedAt }}</p>
                    <p>巡更人列表：{{ selectData.completedBys.map(item => item.name).join(",") }}</p>
                    <p>
                        巡更点：
                        <br>
                        <font v-for="item in selectData.patrolRecords">
                        {{ item.checkpointName }}  {{ item.completedBy }}  {{ item.completedAt ? moment(item.completedAt).format('YYYY-MM-DD HH:mm:ss') : '' }}
                        <br>
                        </font>
                    </p>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="pageSize" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.dateTime="{ item }">
            <span>{{ moment(item.raw.dateTime).format('YYYY-MM-DD') }}</span>
        </template>
        <template v-slot:item.status="{ item }">
            <span v-if="item.raw.status == 'PENDING'">待执行</span>
            <span v-if="item.raw.status == 'IN_PROGRESS'">执行中</span>
            <span v-if="item.raw.status == 'COMPLETED'">已完成</span>
        </template>
        <template v-slot:item.completedBys="{ item }">
            <span>{{ item.raw.completedBys.map(k => k.name).join(",") }}</span>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-pencil" variant="text" @click="clickEdit(item.raw)"></v-btn>
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
